<template>
  <div class="warp">
    <el-button :type="buttonType" @click="showDialog" :class="color ? 'blue' : 'u-btn'">{{ text }}</el-button>
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      :width="size"
      :close-on-click-modal="false"
      append-to-body
      :before-close="handleClose"
    >
      <span>
        <div>
          <slot></slot>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
        v-if="btnShow == '1' ? false : true"
      >
        <el-button @click="cancelHandel">取消</el-button>
        <el-button type="primary" @click="submitHandel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TextDialog",
  props: {
    text: [String],
    color:{
      type: String,
      default:''
    },
    buttonType: {
      type: String,
      default() {
        return "text";
      },
    },
    type: {
      type: String,
      default() {
        return "1"; //1 表示不显示 底部按钮 其他代表显示底部按钮
      },
    },
    size: [String],
    btnShow: [String],
    title: [String],
  },
  data() {
    return {
      isShow: false,
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    showDialog() {
      this.isShow = true;
      this.$emit("showDialog");
    },
    // 关闭弹窗
    handleClose(done) {
      done();
    },
    // 提交
    submitHandel() {
      if (this.btnShow != "1") {
        this.$emit("closeDialogSubmit");
      }
      this.dialogVisible = false;
    },
    // 取消
    cancelHandel() {
      if (this.btnShow != "1") {
        this.$emit("cancelHandel");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.warp {
  display: inline;
}
.u-btn{
  color: #333;
}
.blue {
  color: #2a83e2;
  padding-left: 0;
  padding-right: 0;
}
</style>
